<template>
    <div>
        <div class="mouse-wheel-vertical-scroll">
            <div class="title">
                <div class="logo">
                    <img :src="logo_img" alt="logo">
                </div>
                <div class="name">伟明地磅数据上报平台</div>
            </div>
            <div class="mouse-wheel-wrapper" ref="scroll">
                <Table border :columns="columns" :data="datalist" size="small" :loading="loading" class="tb" :max-height="tbHeight ? tbHeight : 0">
                    <template slot="flag" slot-scope="{ row }">
                        <div>{{row.flag == 'success' ? '成功' : row.flag == 'fail' ? '失败' : '未上报'}}</div>
                    </template>
                    <template slot="status" slot-scope="{ row }">
                        <div>{{row.deletetime ? '是' : '否'}}</div>
                    </template>
                    <template slot="option" slot-scope="{ row }">
                        <div>
                            <Button  type="text" size="small" @click.stop="remove(row)" type="error" class="is-delete">删除</Button>
                        </div>
                    </template>
                </Table>
            </div>
            <div class="pager">
                <Page size="small"
                      :total="total"
                      :current="page"
                      :page-size="num"
                      show-total
                      class="pg-content"
                      @on-change="pageChange"
                      :style="{'text-align': 'right'}"/>
            </div>
        </div>
        <div class="shoudong">
            <Button type="primary" @click="shoudong">手动上传</Button>
        </div>
        <Modal
            v-model="modal_updata"
            title="手动上传"
            @on-ok="ok"
            class="sd-modal"
            @on-cancel="cancel">
                <div style="margin-bottom: 15px;">请选择要上报数据的时间段</div>
                <Date-picker type="datetimerange" placeholder="选择日期和时间" v-model="datetimerange" style="width: 300px"></Date-picker>
        </Modal>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { mapGetters, mapState } from 'vuex';

    import {
        Input,
        Button,
        DatePicker,
        Icon,
        Table,
        Page,
        Modal
    } from 'iview';

    Vue.component('Input', Input);
    Vue.component('Button', Button);
    Vue.component('DatePicker', DatePicker);
    Vue.component('Icon', Icon);
    Vue.component('Table', Table);
    Vue.component('Page', Page);
    Vue.component('Modal', Modal);
    import {time2date} from '@/utils/utils';

    export default {
        computed: {
            ...mapState([
                'host',
                'wsURL',
                'baseURL'
            ])
        },
        data() {
            return {
                loading: false,
                modal_updata: false,
                datetimerange: [
                    (new Date((new Date()).getTime() - 24*60*60*1000)),
                    (new Date((new Date()).getTime() - 24*60*60*1000))
                ],
                tbHeight: '',
                num: 15,
                total: 0,
                page: 1,
                logo_img: require('../../../assets/img/wm_logo.png'),
                datalist: [],
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '主键',
                        key: 'no',
                        ellipsis: true,
                        tooltip: true,
                        minWidth: 60
                    },
                    {
                        title: '车牌号',
                        key: 'carNo',
                        minWidth: 85
                    },
                    {
                        title: '称重名称',
                        key: 'productName',
                        minWidth: 85
                    },
                    {
                        title: '卡号',
                        key: 'icCode',
                        minWidth: 80
                    },
                    {
                        title: '毛重',
                        key: 'grossWeight',
                        minWidth: 80
                    },
                    {
                        title: '皮重',
                        key: 'tareWeight',
                        minWidth: 80
                    },
                    {
                        title: '净重重量',
                        key: 'netWeight',
                        ellipsis: true,
                        tooltip: true,
                        minWidth: 70
                    },
                    {
                        title: '第一次称重时间',
                        key: 'grossTime',
                        minWidth: 150
                    },
                    {
                        title: '第二次称重时间',
                        key: 'tareTime',
                        minWidth: 150
                    },
                    // {
                    //     title: '发送方',
                    //     key: 'sourceUnit',
                    //     minWidth: 120
                    // },
                    // {
                    //     title: '运输方',
                    //     key: 'transportUnit',
                    //     minWidth: 120
                    // },
                    // {
                    //     title: '接收方',
                    //     key: 'handleUnit',
                    //     minWidth: 180
                    // },
                    {
                        title: '上报时间',
                        key: 'createdAt',
                        minWidth: 150
                    },
                    {
                        title: '上报状态',
                        slot: 'flag',
                        minWidth: 70
                    },
                    {
                        title: '是否已删除',
                        slot: 'status',
                        align: 'center',
                        minWidth: 70
                    },
                    {
                        title: '操作',
                        slot: 'option',
                        align: 'center',
                        minWidth: 70
                    }
                ]
            }
        },
        methods:{
            shoudong(){
                this.modal_updata = true;
            },
            ok () {
                let vm = this;
                vm.ajax({
                    method: 'POST',
                    noauth: true,
                    data: {
                        start: time2date(vm.datetimerange[0].getTime()),
                        end: time2date(vm.datetimerange[1].getTime())
                    },
                    url: vm.baseURL + "/weight/manual",
                    success: (data) => {
                        vm.showMessage('提交成功', 'success');
                    },
                    fail() {
                        console.log('11111111111111111');
                    }
                });
            },
            cancel () {},
            remove(row){
                let vm = this;
                Modal.confirm({
                    title: '确定要删除吗？',
                    content: '删除后不可恢复',
                    onOk: () => {
                        vm.ajax({
                            method: 'POST',
                            noauth: true,
                            data: {
                                no: row.no
                            },
                            url: vm.baseURL + "/weight/delete",
                            success: (data) => {
                                vm.showMessage('删除成功', 'success');
                                setTimeout(()=>{
                                    location.reload();
                                }, 2000);
                            },
                            fail(res) {
                                console.log('删除失败');
                                console.log(res);
                            }
                        });
                    },
                    onCancel: () => {

                    }
                });
            },
            pageChange(pageNumber=1) {
                let vm = this;
                vm.page = pageNumber;
                if(!vm.loading){
                    vm.loading = true;
                    vm.ajax({
                        method: 'get',
                        noauth: true,
                        params: {
                            pageSize: vm.num,
                            currentPage: vm.page
                        },
                        url: vm.baseURL + "/weight/page",
                        success: (data) => {
                            vm.loading = false;
                            vm.datalist = data.list;
                            vm.total = data.count;
                        },
                        fail() {
                            vm.loading = false;
                        }
                    });
                }
            },
            calculateTableHeight() {
                let clientHeight = document.documentElement.clientHeight;
                this.tbHeight = clientHeight - 200;
            },
            weighType(type){
                if(type == 1){
                    return "居民投放称重";
                }
                else if(type == 2){
                    return "车载称重（按桶）";
                }
                else if(type == 3){
                    return "地磅称重";
                }
                else if(type == 4){
                    return "回收称重";
                }
                else{
                    return "其他称重";
                }
            },
            garbageType(type){
                if(type == 30){
                    return "餐厨垃圾";
                }
                else if(type == 31){
                    return "厨余垃圾";
                }
                else if(type == 32){
                    return "生鲜垃圾";
                }
                else if(type == 40){
                    return "其他垃圾";
                }
                else if(type == 10){
                    return "可回收物";
                }
                else if(type == 20){
                    return "有害垃圾";
                }
                else if(type == 33){
                    return "地沟油";
                }
                else if(type == 42){
                    return "工业垃圾";
                }
                else if(type == 43){
                    return "炉渣";
                }
                else{
                    return "其他垃圾";
                }
            },
            websocket(){
                let vm = this;
                const log = console.log;
                // init
                const socket = io(vm.wsURL + '/', {
                    // 实际使用中可以在这里传递参数
                    query: {
                        room: 'room_avs',
                        userId: `client_${Math.random()}`,
                    },

                    transports: ['websocket']
                });

                socket.on('connect', () => {
                    const id = socket.id;
                    log('#connect,', id, socket);

                    // 监听自身 id 以实现 p2p 通讯
                    socket.on(id, msg => {
                        log('#receive,', msg);
                    });

                    socket.on('newcoming', msg => {
                        if(msg.type == 'success'){
                            vm.showMessage('上报成功', 'success');
                            vm.page = 1;
                            vm.pageChange();
                        }
                        else{
                            vm.showMessage('上报失败');
                            vm.page = 1;
                            vm.pageChange();
                        }
                        log('#newcoming,', msg);
                    });
                });

                // 接收在线用户信息
                socket.on('online', msg => {
                    log('#online,', msg);
                });

                // 系统事件
                socket.on('disconnect', msg => {
                    log('#disconnect', msg);
                });

                socket.on('disconnecting', () => {
                    log('#disconnecting');
                });

                socket.on('error', () => {
                    log('#error');
                });

                window.socket = socket;
            }
        },
        mounted() {
            this.calculateTableHeight();
            this.pageChange();
            //this.websocket();

            setTimeout(()=>{
                location.reload();
            }, 60000);
        }
    }
</script>
<style scoped lang="scss">
    @import '../../../assets/scss/base/mixins';
    @import '../../../assets/scss/base/placeholder';

    .mouse-wheel-vertical-scroll{
        height: 100%;
        box-sizing: border-box;
        & /deep/ .ivu-table-cell{
            padding-left: 8px;
            padding-right: 8px;
        }
        & .is-delete /deep/ span{
            color: white;
        }
        & .title{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            & .logo{
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                & img{
                    height: 35px;
                    display: block;
                }
            }
            & .name{
                margin-left: 15px;
                text-align: center;
                height: 100px;
                line-height: 100px;
                font-size: 30px;
            }
        }
        & .mouse-wheel-wrapper{
            height: calc( 100% - 200px );
            overflow: hidden;
            text-align: center;
            & .tb{
                width: 1300px;
                margin: 0 auto;
                border-radius: 3px;
            }
            & /deep/ .ivu-table{
                opacity: 0.8;
            }
        }
        .pager{
            padding-top: 30px;
            height: 100px;
            box-sizing: border-box;
            padding-right: 0px;
            text-align: center;
            & .pg-content{
                width: 1300px;
                margin: 0 auto;
            }
            & /deep/ .ivu-page-total{
                color: white;
            }
        }

        @media (min-width: 900px) and (max-width: 1199px){
            & .mouse-wheel-wrapper{
                & .tb{
                    width: 800px!important;
                }
            }
            .pager{
                & .pg-content{
                    width: 800px!important;
                }
            }
        }
        @media (min-width: 1200px) and (max-width: 1499px){
            & .mouse-wheel-wrapper{
                & .tb{
                    width: 1100px!important;
                }
            }
            .pager{
                & .pg-content{
                    width: 1100px!important;
                }
            }
        }
        @media(min-width: 1500px) and (max-width: 1899px){
            & .mouse-wheel-wrapper{
                & .tb{
                    width: 1300px!important;
                }
            }
            .pager{
                & .pg-content{
                    width: 1300px!important;
                }
            }
        }
        @media(min-width: 1900px) and (max-width: 2499px){
            & .mouse-wheel-wrapper{
                & .tb{
                    width: 1600px!important;
                }
            }
            .pager{
                & .pg-content{
                    width: 1600px!important;
                }
            }
        }
        @media(min-width: 2500px) and (max-width: 3500px){
            & .mouse-wheel-wrapper{
                & .tb{
                    width: 2100px!important;
                }
            }
            .pager{
                & .pg-content{
                    width: 2100px!important;
                }
            }
        }
    }
    .shoudong{
        position: absolute;
        right: 200px;
        top: 30px;
        & /deep/ button > span{
            color: white!important;
        }
    }
</style>
